<script setup lang="ts">

</script>

<template>
    <img id="status" src="@/assets/wechatlogin/status.png" />
    <img id="back" src="@/assets/register/back.png" alt="">
    <div id="setpassword">请设置密码</div>
    <div class="user">
        <div id="loginpassword">登录密码用于</div>
        <div id="loginuser">千福汇APP登录</div>
    </div>

    <div id="password">密码</div>
    <div class="input">
        <input type="text" placeholder="请输入密码" />
        <img id="cancel" src="@/assets/setpassword/cancel.png" alt="">
        <br>
        <img id="line" src="@/assets/setpassword/line.png" alt="">
    </div>
    <div id="querypassword">确定密码</div>
    <div class="input">
        <input type="text" placeholder="请再次输入密码" />
        <img id="cancel" src="@/assets/setpassword/cancel.png" alt="">
        <img id="eye" src="@/assets/setpassword/eye.png" alt="">
        <br>
        <img id="line" src="@/assets/setpassword/line.png" alt="">   
    </div>

    <div id="tip">至少8个字符，不能全是字母或数字</div>
    <img id="tologin" src="@/assets/setpassword/tologin.png" alt="">


</template>

<style scoped lang="less">
#status {
    width: 390px;
    height: 44px;
    background-color: rgba(248, 248, 248, 1);
}

#back {
    margin-left: 19px;
    margin-top: 20px;
    width: 20px;
    height: 20px;
}

#setpassword {
    margin-top: 60px;
    margin-left: 20px;
    width: 140px;
    height: 40px;
    line-height: 40px;
    color: rgb(64, 64, 64);
    font-size: 28px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.user {
    height: 20px;
    width: 390px;
    position: relative;

    #loginpassword {
        position: absolute;
        left: 19px;
        width: 84px;
        height: 20px;
        line-height: 20px;
        color: rgb(16, 16, 16);
        font-size: 14px;
        text-align: left;
        font-family: PingFangSC-regular;
    }

    #loginuser {
        position: absolute;
        left: 103px;
        width: 98px;
        height: 20px;
        line-height: 20px;
        color: rgb(16, 16, 16);
        font-size: 14px;
        text-align: left;
        font-family: PingFangSC-regular;
    }
}

#password {
    margin-top: 54px;
    margin-left: 20px;
    width: 28px;
    height: 20px;
    line-height: 20px;
    color: rgb(64, 64, 64);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
}

#querypassword {
    margin-top: 54px;
    margin-left: 20px;
    width: 56px;
    height: 20px;
    line-height: 20px;
    color: rgb(64, 64, 64);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.input {
    height: 47px;
    width: 390px;
    margin-left: 20px;

    input {
        margin-top: 10px;
        width: 225px;
        height: 30px;
        line-height: 20px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 18px;
        text-align: left;
        font-family: Roboto;
        border: 0;
    }

    #cancel {
        margin-left: 50px;
        width: 20px;
        height: 20px;
    }

    #line {
        width: 335px;
        height: 1px;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(217, 217, 217, 1);
    }
    #eye{
        margin-left: 9px;
    }
}

#tip{
    margin-left: 24px;
    margin-top: 10px;
    width: 219px;
    height: 20px;
    line-height: 20px;
    color: rgba(24,144,255,1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;

}

#tologin{
    margin-left: 24px;
    margin-top: 17px;
}
</style>